import React, {useEffect, useState} from "react";
import {Button, Col, Form, Input, Row} from "antd";
import './CmsActionPanel.scss'
import {DeleteOutlined, DownOutlined, EditOutlined, PlusOutlined, SearchOutlined, UpOutlined} from "@ant-design/icons";

type Props = {
    rowData?: { [key: string]: any }
    onDelete?: () => void
    onAdd?: () => void
    selectedRowKeys: string[]

}


const CmsActionPanel = ({
                            rowData,
                            onDelete,
                            onAdd,
                            selectedRowKeys,
                        }: Props) => {
    const [form] = Form.useForm();
    const [, forceUpdate] = useState({});
    const [expand, setExpand] = useState(false);

    useEffect(() => {
        forceUpdate({});
    }, []);

    const onFinish = (values: any) => {
        console.log('Finish:', values);
    };

    function addClick() {

    }

    function delClick() {

    }

    function updateClick() {

    }


    return (
        <div className="search-content">
            <Row gutter={24}>
                <Col span={6} className="btn-group">
                    <Button type="primary" htmlType="submit" size="small" className="btn-group-content"
                            onClick={addClick} icon={<PlusOutlined/>}
                    >
                        添 加
                    </Button>

                    <Button type="primary" htmlType="submit" size="small" className="btn-group-content"
                            onClick={delClick} icon={<DeleteOutlined/>}
                    >
                        删 除
                    </Button>

                    <Button type="primary" htmlType="submit" size="small" className="btn-group-content"
                            onClick={updateClick} icon={<EditOutlined/>}
                    >
                        修 改
                    </Button>
                </Col>
                <Col span={18}>
                    <Form form={form} className="horizontal_content" name="horizontal_content" layout="inline"
                          onFinish={onFinish}>
                        <Form.Item name="username">
                            <Input placeholder="Username"/>
                        </Form.Item>
                        <Form.Item name="password">
                            <Input placeholder="Password"/>
                        </Form.Item>

                        <Button type="primary" htmlType="submit" size="small" icon={<SearchOutlined/>}>
                            搜 索
                        </Button>
                        <a
                            style={{fontSize: 12,}}
                            onClick={() => {
                                setExpand(!expand);
                            }}
                        >
                            {expand ? <UpOutlined/> : <DownOutlined/>} {expand ? '展开' : '收起'}
                        </a>

                    </Form>
                </Col>
            </Row>

        </div>

    );
};

export default CmsActionPanel;
